<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>全局配置管理</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" method="POST" id="searchForm" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">配置名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="settingName" placeholder="请输入配置名" class="layui-input" id="configName">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button type="button" class="layui-btn layui-btn-md " id="searchBtn">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-md">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重置
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="config-table" lay-filter="config-table"></table>
    </div>
</div>

<script type="text/html" id="config-toolbar">
    <button class="layui-btn  layui-btn-md" lay-event="add" sa:hasPermission="setting_add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="layui-btn layui-btn-danger layui-btn-md" lay-event="batchRemove" sa:hasPermission="setting_delete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
</script>
<script type="text/html" id="config-bar">
    <button class="layui-btn  layui-btn-sm" sa:hasPermission="setting_update" lay-event="edit"><i
            class="layui-icon layui-icon-edit"></i></button>
    <button class="layui-btn layui-btn-danger layui-btn-sm" sa:hasPermission="setting_delete" lay-event="remove"><i
            class="layui-icon layui-icon-delete"></i></button>
</script>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    layui.use(['table', 'form', 'jquery'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let baseURL = /*[[@{/}]]*/ '';

        // 渲染表格
        function loadTable(configName = '') {
            table.render({
                elem: '#config-table',
                url: baseURL + 'setting/list', // API 地址
                toolbar: '#config-toolbar',
                page: true, // 开启 layui 自带分页
                limit: 10, // 默认每页条数
                limits: [10, 20, 30], // 可选的每页条数
                where: {
                    name: configName
                    // 不需要手动传递分页参数，layui 会自动处理分页参数
                },
                request: {
                    pageName: 'pageNum', // 将页码参数名称从 'page' 改为 'pageNum'
                    limitName: 'pageSize' // 将每页条数参数名称从 'limit' 改为 'pageSize'
                },
                parseData: function (res) { // 解析后端返回的数据
                    return {
                        "code": res.code, // 状态码
                        "msg": res.msg, // 返回消息
                        "count": res.data.total, // 总条数
                        "data": res.data.list // 数据列表
                    };
                },
                cols: [
                    [
                        {type: 'checkbox'},
                        {field: 'settingName', title: '配置名', minWidth: 200},
                        {field: 'settingKey', title: '配置Key', minWidth: 200},
                        {field: 'settingValue', title: '配置值', minWidth: 300},
                        {title: '操作', templet: '#config-bar', width: 150, align: 'center'},
                    ]
                ],
                response: {
                    statusCode: 1000
                }
            });
        }


        loadTable(); // 初始加载表格


        // 监听查询按钮点击事件
        $('#searchBtn').on('click', function () {
            const configName = $('#configName').val();
            loadTable(configName); // 根据输入的配置名重新加载表格
        });

        // 监听操作
        table.on('tool(config-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        // 监听工具栏
        table.on('toolbar(config-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        // 新增配置
        window.add = function () {
            layer.open({
                type: 2,
                title: '新增配置',
                shade: 0.1,
                area: ['900px', '800px'],
                content: 'setting_add'
            });
        };

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改配置',
                shade: 0.1,
                area: ['900px', '800px'],
                content: 'setting_edit?settingId=' + obj.data.settingId,
                success: function (layero, index) {
                    // 数据回显
                    let body = layer.getChildFrame('body', index)
                    body.find("input[name=settingName]").val(obj.data.settingName)
                    body.find("input[name=settingKey]").val(obj.data.settingKey)
                    body.find("textarea[name=settingValue]").val(obj.data.settingValue)
                }
            });

        };

        // 删除配置
        window.remove = function (obj) {
            layer.confirm('确定要删除该配置吗？', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "setting/delete/" + obj.data.settingId,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 1000) {
                            layer.msg(result.msg, {icon: 1, time: 2000}, function () {
                                obj.del();
                                table.reload('config-table'); // 刷新表格
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 2000});
                        }
                    }
                });
            });
        };

        // 批量删除
        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 2000});
                return false;
            }
            let ids = data.map(item => item.settingId).join(',');
            layer.confirm('确定要删除选中的配置吗？', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "setting/batchdelete",
                    data: {ids: ids},
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code === 1000) {
                            layer.msg(result.msg, {icon: 1, time: 2000}, function () {
                                table.reload('config-table');
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 2000});
                        }
                    }
                });
            });
        };
    });
</script>

</body>
</html>
